
<template>
    <el-progress v-if="progress == 100" type="circle" :percentage="progress" status="success">
      <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">测试进度</span>
        </template>
    </el-progress>

    <el-progress v-if="progress != 100"  type="dashboard" :percentage="progress" >
        <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">测试进度</span>
        </template>    
    </el-progress>

</template>

<script setup>

const props = defineProps({
    progress: {
        type: Number,
        default: 0
    }
})

</script>

<style scope>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}

</style>